<template>
    <div>
        <headers :head_title="head_title" />

        <div class="kun">
            <div class="name">{{ detailData.title }}</div>
            <div class="jun">{{ detailData.source }}</div>
            <div v-html="detailData.content" style="width: 100%;height: 100%;font-size: 25px;"></div>
        </div>
        <div class="mu">
            <div class="lun">
                <img src="../../assets/233.png" alt="" v-if="flag" @click="dian">
                <img src="../../assets/322.png" alt="" v-if="!flag" @click="ji">
            </div>


            <div class="lun"><img src="../../assets/3344.png" alt=""></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showDialog } from 'vant';
// import { useMyStore } from '@/stores/my_Store';
import { my } from 'element-plus/es/locales.mjs';

import headers from '@/components/header.vue'
const head_title = ref('我的咨询详情')

const logindata = ref(JSON.parse(localStorage.getItem('result') || '{}'))
console.log(logindata.value)
const route = useRoute();
const router = useRouter();
const id = route.params.id;
const detailData = ref({});
const getlist = () => {
    axios.get(`/health/share/information/v1/findInformation?infoId=` + id).then((res) => {
        console.log(res);
        detailData.value = res.data.result;
        // 数据获取成功后，添加到Pinia仓库的收藏数组中（假设符合添加条件）
    });
};
const data = detailData.value;
const userId=ref(localStorage.getItem('userId'));
const sessionId=ref(JSON.parse(localStorage.getItem('sessionId')||'{}'));
const userdata=ref({
    infoId:id,
    userId:userId.value,
    sessionId:sessionId.value
})
const flag = ref(true);
// const MyStore = useMyStore();
// const myArray = ref(MyStore.getArray());
const dian = () => {
    flag.value = !flag.value;
    showDialog({ message: '收藏成功' });
    axios.post('/health/user/verify/v1/addInfoCollection',{
        infoId:userdata.value.infoId,
    },{
        headers: {
            userId:userdata.value.userId,
            sessionId:userdata.value.sessionId,
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    }).then((res) => {
        console.log(res);
    })
};
// if(myArray.value){
//     flag.value=!flag.value
// }
const ji = () => {
    flag.value = !flag.value
    showDialog({ message: '取消收藏' });
    // MyStore.removeFromArray(0);
    // myArray.value = MyStore.getArray();
    axios.delete(`/health/user/verify/v1/cancelInfoCollection?infoId=${userdata.value.infoId}`,{
        headers: {
            userId:userdata.value.userId,
            sessionId:userdata.value.sessionId,
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    }).then((res) => {
        console.log(res);
    })
}
onMounted(() => {
    getlist()
})
const back = () => {
    router.push('/home')
}

const my_message = () => {
    router.push('/my_message')
}
</script>

<style scoped lang="scss">
.wen {
    font-size: 18px;
    margin-top: 8px; // 22px * 0.5
    margin-left: 125px;
}

.jun {
    margin-top: 10px; // 20px * 0.5
    color: #ccc;
}

.name {
    margin-top: 7.5px; // 15px * 0.5
    font-size: 15px; // 30px * 0.5
    font-weight: 600;
}

.kun {
    width: 330px; // 90% * 0.5
    height: 100%;
    // background: pink;
    margin: 0 auto;

    img {
        width: 100%;
    }

}

.mu {
    position: fixed;
    right: 2.5%; // 5% * 0.5
    bottom: 2.5%; // 5% * 0.5
}

.lun {
    width: 30px; // 60px * 0.5
    height: 30px; // 60px * 0.5
    border-radius: 50%;
    box-shadow: 0 0 2.5px 0.5px #666; // 5px和1px分别减半
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 10px; // 20px * 0.5
    margin-right: 0px;
    margin-top: 12.5px; // 25px * 0.5

    img {
        width: 100%;
    }
}

.tup {
    width: 18px; // 60px * 0.5
    height: 18px; // 60px * 0.5
    margin-top: 11px; // 22px * 0.5
    margin-left: 15px; // 15px * 0.5
    border-radius: 50%;
    font-size: 20px;
}

.kun-img {
    width: 100%;
    height: 150px; // 300px * 0.5
}

.box {
    width: 100%;
    height: 40px; // 100px * 0.5
    border-bottom: 1px solid #ccc; // 15px * 0.5
    display: flex;
}

.img {
    width: 25px; // 50px * 0.5
    height: 25px; // 50px * 0.5
    margin-top: 13.5px; // 27px * 0.5
    margin-left: 7.5px; // 15px * 0.5
}

.img1 {
    width: 17.5px; // 35px * 0.5
    height: 22.5px; // 45px * 0.5
    position: absolute;
    left: 340px; // 680px * 0.5
    top: 15px; // 30px * 0.5
}
</style>
